var path = require("path");
//引入插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 引入css插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    //指定打包模式
   mode:'development',
  //定义入口文件
   entry:{
       //设置index.html和login.html要打包的入口js文件
       index:"./public/js/index.js",
       login:"./public/js/login.js",
   },
   output:{
     //输出文件位置
     path: path.resolve(__dirname, "dist/"),
       //文件名保持一致
     filename:"js/[name].js"
  },
   //配置插件
  plugins: [
    htmlPlugin('index'),
    //打包login页面
    htmlPlugin('login'),
    // htmlPlugin('register'),
    //配置css插件
    new MiniCssExtractPlugin({
      // 打包后的 css 路径和文件名
      filename: './css/[name].css'
    })
  ],
  // loader 配置
  module: {
    rules: [
      //打包css
      {
          //需要打包的文件名字
            test: /\.css$/i,
            use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
      // 打包scss
      {
        // 需要打包的文件名字
        test: /\.scss$/i,
        use:['style-loader','css-loader','sass-loader']
      },
      //图片loader
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 1024 * 20,// 20kb一下的图片直接转为base-64格式字符串放在页面中，
              outputPath: 'assets',//打包后图片在dist目录下的路径
              esModule:false,// 用于解决兼容性问题
            }
          }
        ]
      },
      //HTML中的图片配置
      {
        test: /\.html$/i,
        use:['html-withimg-loader']
      }
    ]
  },
  // 服务器配置
  devServer: {
    port: 8080,//服务器端口号，默认8080
    open: true, // 启动服务器时自动打开页面
    hot: true, // 实时更新,
    openPage: 'html/index.html',
    //配置代理服务器
    proxy: {
      //业务数据
      '/': {
          target: 'http://localhost:3333'  // 后端服务器地址
      },
    //   //鉴权服务
    //   '/auth': {
    //     target: 'http://localhost:9999'  // 后端服务器地址
    // }
    }
}
}



//封装成函数，代码少一些
function htmlPlugin(filename) {
  return new HtmlWebpackPlugin({
    //需要打包的HTML页面
    template: `./public/${filename}.html`,
    //打包后的文件路径
    filename: `./html/${filename}.html`,
    //需要引入的js文件名数组
    chunks: [filename]
  })
}